<template>
	<view class="page">
		<!-- 账号类型目前只支持银行卡 -->
		<view class="type">
			<view class="accountType">账号类型</view>
			<u-radio-group
					v-model="value"
					placement="row"
				>
					<u-radio
						:customStyle="{marginRight: '16px'}"
						 v-for="(item, index) in radiolist6"
						:key="index"
						:label="item.name"
						:name="item.name"
						@change="readio(item.id)"
					>
					</u-radio>
				</u-radio-group>
		</view>
		<view class="account">
			<view class="na">姓名</view>
			<input type="text" placeholder="请输入您的姓名" placeholder-style="color:#999; font-size: 27rpx;" v-model="value1" @input="Input1"/>
		</view>
		<!-- <view class="account">
			<view class="na">身份证号</view>
			<input type="text" placeholder="请输入您的身份证号码" maxlength="18" placeholder-style="color:#999; font-size: 27rpx;" v-model="value2" @input="Input2"/>
		</view> -->
		<view class="account">
			<view class="na">银行名称</view>
			<input type="text" placeholder="请输入银行名称" placeholder-style="color:#999; font-size: 27rpx;" v-model="value3" @input="Input3"/>
		</view>
		<view class="account">
			<view class="na">银行卡号</view>
			<input type="text" placeholder="请输入您的银行卡号" maxlength="16" placeholder-style="color:#999; font-size: 27rpx;" v-model="value4" @input="Input4"/>
		</view>
		<button class="btn" @click="btn">确认</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1:'',
				value2:'',
				value3:'',
				value4:'',
				value:'',
				type:'',
				//横向排列形式数据
				radiolist6: [{
						id:1,
						name: '支付宝',
						disabled: false
					},
					{
						id:2,
						name: '银行卡',
						disabled: false
					},
					
				],
			};
		},
		methods:{
			// 姓名
			Input1(e){
				this.value1 = e.target.value
				console.log('输入',e)
			},
			// 身份证
			Input2(e){
				this.value2 = e.target.value
				console.log('输入2',e)
			},
			// 银行名称
			Input3(e){
				this.value3 = e.target.value
				console.log('输入3',e)
			},
			// 银行卡号
			Input4(e){
				this.value4 = e.target.value
				console.log('输入4',e)
			},
			// 选择支付宝还是银行卡
			readio(id){
				this.type = id
				console.log('支付宝还是银行卡',this.type)
			},
			// 确定添加卡号
			btn(){
				this.$api.post("my/addcard",{
					type:this.type,  //支付宝和银行卡
					aliaccount:this.aliaccount,//支付宝账号
					aliusername:this.value1,//支付宝姓名
					bankname:this.value3,//银行名称
					bankcarduser:this.value1,//银行用户姓名
					bankcardnum:this.value4,//银行卡号
				}).then(res =>{
					console.log('添加卡号',res)
				})
				
				
				
				uni.showToast({
					title:'提交成功,即将返回我的',
					icon:'none',
					duration:2000
				})
				setTimeout(function(){
					uni.switchTab({
						url:('/pages/tabs/my')
					})
					console.log('3')
				},2000)
			},
			// // 提现卡号列表
			// getWithdrawCardList(){
			// 		this.$api.get("my/getWithdrawCardList",{pagenum:1}).then(res =>{
			// 			console.log('卡号11',res)
			// 		})
			// },
		}
	}
</script>

<style lang="scss">
	.page{
		background-color: #F7F7F7;
	}
	.type{
		display: flex;
		font-weight: 500;
		font-size: 27rpx;
		color: #333333;
		line-height: 40rpx;
		padding: 27rpx;
		background-color: #FFFFFF;
	}
	.accountType{
		margin-right: 40rpx;
	}
	.account{
		// width: 750rpx;
		height: 63rpx;
		background: #FFFFFF;
		display: flex;
		padding: 15rpx 40rpx;
		font-weight: 500;
		font-size: 27rpx;
		color: #333333;
		line-height: 63rpx;
		border: 1rpx solid #F7F7F7;
	}
	.na{
		width: 150rpx;
		// margin-right: 100rpx;
	}
	.btn{
		// width: 697rpx;
		margin: 110rpx 27rpx 0;
		height: 87rpx;
		background: #3681F3;
		border-radius: 13rpx;
		font-weight: bold;
		font-size: 29rpx;
		color: #FFFFFF;
	}
</style>
